<template>
  <div class="container">
    <div class="captioncon betweenbox">
      <div class="centerbox">
        <span class="iconfont iconbaogao cpationicon"></span>
        <span>辅助设备</span>
      </div>
      <div class="return" @click="goBack"></div>
    </div>
    <div class="tongjicon borderStyle">
      <mybar @clickEcha="clickEcha" :stationID="stationID" />
    </div>
    <div class="formcon">
      <myform ref="myform" @formSearch="formSearch" />
    </div>
    <div class="tablecon">
      <mytable :tableData="tableData" />
    </div>
    <div class="pagcon">
      <mypagination :totalSize="totalSize" ref="mypagination" @paginSearch="paginSearch" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import mybar from "./Bar.vue";
import mytable from "./Table.vue";
import mypagination from "./Pagination.vue";
import myform from "./Form.vue";

@Component({ components: { mytable, mypagination, mybar, myform } })
export default class extends Vue {
  $refs!: {
    myform: myform;
    mypagination: mypagination;
  };

  stationID = "";
  formSearch(val) {
    let page = this.getPagination();
    page.page = 1;
    this.setPagination(page);
    this.search();
    this.stationID = val;
  }
  paginSearch() {
    this.search();
  }
  search() {
    let params = Object.assign({}, this.getForm(), this.getPagination());
    Vue.delete(params, "totalSize");
    console.log(params);

    this.fetch(params);
  }
  getForm() {
    let myform = this.$refs.myform;
    if (myform) {
      return myform.formData || {};
    } else {
      return {};
    }
  }
  getPagination() {
    let mypagination = this.$refs.mypagination;
    return mypagination.pages;
  }
  setPagination(pages) {
    let mypagination = this.$refs.mypagination;
    if (mypagination) {
      mypagination.pages = pages || {};
    }
  }
  tableData = [];
  totalSize = "";
  fetch(from) {
    (this as any).$services
      .queryFksbList({ data: from, method: "get" })
      .then((result: any) => {
        console.log(result);
        if (result) {
          let page = from.page;
          let size = from.size;
          this.tableData = result.data.records.map((v, i) => {
            v.myIndex = (page - 1) * size + i + 1;
            return v;
          });
          this.totalSize = result.data.total;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  //返回按钮
  goBack() {
    this.$router.go(-1);
  }
  sysId_options = [
    // {name:'全部',code:''},
    { name: "消防系统", code: "xfxt" },
    { name: "安防系统", code: "afxt" },
    { name: "环境监测", code: "hjjc" },
    { name: "在线监测", code: "zxjc" },
    { name: "照明系统", code: "zmxt" },
  ];
  clickEcha(val) {
    console.log(val);
    this.sysId_options.map((it) => {
      if (it.name == val.name) {
        this.getForm().ssxt = it.code;
        this.search();
      }
    });
  }
  mounted() {
    console.log(88);
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 0 0.2rem 0.2rem;
  .captioncon {
    width: 100%;
    height: 0.5rem;
    align-items: center;
    align-content: center;
    font-size: 0.2rem;
    .cpationicon {
      font-size: 0.2rem;
      margin-right: 0.04rem;
    }
    .return {
      width: 0.9rem;
      height: 0.3rem;
      background: url(../../../assets/img/return.png) no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  .tongjicon {
    width: 100%;
    height: 2rem;
    padding: 0rem 0.2rem;
    box-sizing: border-box;
    margin-bottom: 0.1rem;
  }
  .formcon {
    width: 100%;
    height: 1.2rem;
  }
  .tablecon {
    width: 100%;
    height: calc(100% - 2.1rem - 0.5rem - 1.2rem - 0.4rem);
  }
  .pagcon {
    width: 100%;
    height: 0.4rem;
  }
}
</style>

